<template>
  <div ref="radar" class="radar" />
</template>

<script>
// import * as echarts from 'echarts'
export default {
  name: 'Radar',

  data() {
    return {
      option: {
        title: {
          text: '人力资源基础绩效图'
        },
        legend: {
          right: 0,
          data: ['平均水平', '个人价值']
        },
        radar: {
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          // shape: 'circle',
          indicator: [
            { name: '工作效率', max: 100 },
            { name: '考勤', max: 100 },
            { name: '积极性', max: 100 },
            { name: '帮助同事', max: 100 },
            { name: '自主学习', max: 100 },
            { name: '正确率', max: 100 }
          ]
        },
        series: [
          {
            name: '平均 vs 个人',
            type: 'radar',
            data: [
              {
                value: [90, 80, 60, 80, 85, 80],
                name: '平均水平'
              },
              {
                value: [90, 75, 95, 90, 95, 90],
                name: '个人价值'
              }
            ]
          }
        ]
      }
    }
  },

  mounted() {
    // 基于准备好的dom，初始化echarts实例
    const myChart = this.$echarts.init(this.$refs.radar)
    // 绘制图表
    myChart.clear()
    myChart.setOption(this.option)
  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
.radar{
  width: 500px;
  height: 450px;
}
</style>
